<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        ps的快捷键
         ctrl+R 标尺
         ctrl+ 放大
         ctrl- 缩小 
         ctrl+h 显示隐藏参考线
     -->
     <style type="text/css">
         *{padding:0; margin:0;}
         /* 所有标签自带的间距清0 */
         .header{
             width:1300px; height:100px;
             background-color:pink;
         }
        .nav{
             width:1300px; height:59px; background-color:#303030;
         }
        .banner{
            width:1300px; height:431px;
            background-color: #b72298;
        }
        .news{
            width:1300px; height:250px; background-color:pink;
        }
        .web{
            width:1300px; height:287px; background-color:#f5f5f5;
        }
        .teacher{
            width:1300px; height:416px; background-color: pink;
        }
        .footer{
            width:1300px; height:124px; background-color:#111b24;
            /* 
                注意
                    1，一定要加#
                    2，#后面的数字要么是6位，要么是3位
           
                float:left; 靠左边（从左向右）
                float:right; 靠右边（从右向左）
                    */
        }
        .logo{
            width:204px; height:49px;
            background-color: yellow;
            float:left;
        }
        .header-right{
            width:298px; height:50px; background-color:#b72298;
            float:right;
        }
        .nav-a{
            width:120px; height:59px;background-color:#999;
            float:left;
        }
        .news-left{
            width:515px;
            height:250px;
            background-color: aqua;
            float:left;
        }
       .news-center{
            width:347px;
            height:250px;
            background-color: yellowgreen;
            float:left;
        }
        .news-right{
            width:241px;
            height:250px;
            background-color:red;
            float:left;
        }

        /* 
            作业要求
                1，消化记忆两天的上课内容
                2，如果是照着抄，把我写的扣丁学堂重复写3遍或以上
                3，三张图分别写上下结构，填颜色，遇到白色换其他颜色
                4，写完上下结构，写左右结构-分颜色

                5，选写
                    内容可填
        */
     </style>
</head>
<body>
    <div class="header">
        <img src="" class="logo"/>
        <div class="header-right"></div>
    </div>
    <!-- header end -->
    <div class="nav">
        <ul>
            <li class="nav-a"></li>
            <li class="nav-a"></li>
            <li class="nav-a"></li>
            <li class="nav-a"></li>
            <li class="nav-a"></li>
            <li class="nav-a"></li>
            <li class="nav-a"></li>
            <li class="nav-a"></li>
            <li class="nav-a"></li>
        </ul>
    </div>
    <!-- nav end -->
    <div class="banner"></div>
    <div class="news">
        <div class="news-left"></div>
        <div class="news-center"></div>
        <div class="news-right"></div>
    </div>
    <!-- news end -->
    <div class="web"></div>
    <div class="teacher"></div>
    <div class="footer"></div>
</body>
</html>